<template>
  <div class="qna-view">
    <NavBar />

    <div class="home-layout">
      <!-- 左侧分类 -->
      <aside class="sidebar">
        <ul>
          <li :class="{ active: selectedTypeId === null }" @click="selectType(null)">全部分类</li>
          <li
            v-for="(name, id) in postTypeMap"
            :key="id"
            :class="{ active: selectedTypeId === +id }"
            @click="selectType(+id)"
          >
            {{ name }}
          </li>
        </ul>
      </aside>

      <!-- 中部问答帖子 -->
      <section class="main-content">
        <PostList
          :posts="allPosts"
          :selectedTypeId="selectedTypeId"
          postType="QUESTION"
        />
      </section>

      <!-- 右侧预留 -->
      <aside class="right-bar"></aside>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { usePostStore } from '@/stores/post'
import { storeToRefs } from 'pinia'
import NavBar from '@/components/NavBar.vue'
import PostList from '@/components/PostList.vue'
import { postTypeMap } from '@/utils/postTypes'

const search = ref('')
const selectedTypeId = ref<number | null>(null)

const postStore = usePostStore()
const { allPosts } = storeToRefs(postStore)

onMounted(() => {
  if (!allPosts.value.length) {
    postStore.fetchAllPosts()
  }
})

const selectType = (typeId: number | null) => {
  selectedTypeId.value = typeId
}
</script>

<style scoped>
.qna-view {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.home-layout {
  display: flex;
  margin-top: 60px;
  padding: 20px;
  gap: 20px;
}

.sidebar {
  width: 200px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  padding: 10px;
  cursor: pointer;
}
.sidebar li.active {
  background-color: #e0f2ff;
  font-weight: bold;
}

.main-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
}

.right-bar {
  width: 200px;
}
</style>
